<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view>
		<van-tabs @change="changeTab" color="#FF971C" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #FF971C' : ''" :title="`待受理(${unHandleLength})`">
				<view class="bg100" v-if="unInspectList.length" >
					<feed-list :feedList="unInspectList"></feed-list>
					<!-- <room-check-list @detail="goDetail" :recordList="unInspectList"></room-check-list> -->
				</view>
				
				<!-- <record-item v-if="applyList.length" :recordList="applyList"></record-item> -->
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="unInspectList.length >= 10" :status="status" />
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #FF971C' : ''" :title="`已受理(${handleLength})`">
				<!-- <record-item v-if="purchaseList.length" :recordList="purchaseList"></record-item> -->
				<view class="bg100" v-if="handleList.length">
					<feed-list :feedList="unInspectList"></feed-list>
					<!-- <room-check-list @detail="goDetail" :recordList="handleList"></room-check-list> -->
				</view>
				
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="handleList.length >= 10" :status="status1" />
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #FF971C' : ''" :title="`已办结(${completeLength})`">
				<!-- <record-item v-if="purchaseList.length" :recordList="purchaseList"></record-item> -->
				<view class="bg100" v-if="completeList.length">
					<feed-list :feedList="unInspectList"></feed-list>
					<!-- <room-check-list @detail="goDetail" :recordList="completeList"></room-check-list> -->
				</view>
				
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="completeList.length >= 10" :status="status2" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import FeedList from './components/feedList.vue'
	// import RecordItem from '../components/recordItem.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			FeedList
		},
		data() {
			return {
				unInspectList: [],
				handleList: [],
				completeList: [],
				inspectList: [],
				status: 'more',
				status1: 'more',
				haveMore: true,
				haveMore1: true,
				active: 0,
				params: {
					projIds: [uni.getStorageSync('projId')],
					status: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					projIds: [uni.getStorageSync('projId')],
					status: 2,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					projIds: [uni.getStorageSync('projId')],
					status: 3,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				}
			}
		},
		onLoad() {
			uni.showLoading()
			this.getUnInspect()
			this.getHandleList()
			this.getCompleteList()
		},
		onReachBottom() {
			if (this.active === 0 && this.haveMore) {
				this.status = 'loading'
				this.params.pagination.current++
				this.getUnInspect()
			} else if (this.active === 1 && this.haveMore1) {
				this.status1 = 'loading'
				this.params1.pagination.current++
				this.getHandleList()
			} else if (this.active === 2 && this.haveMore2) {
				this.status2 = 'loading'
				this.params2.pagination.current++
				this.getCompleteList()
			}
		},
		computed: {
			...mapState(['fontSize']),
			unHandleLength() {
				return this.unInspectList.length
			},
			handleLength() {
				return this.handleList.length
			},
			completeLength() {
				return this.completeList.length
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '/ticketSystem/feedBackDetail/feedBackDetail?id=' + id
				})
			},
			changeTab(name, title) {
				this.active = name.target.index
			},
			getUnInspect() {
				this.$http2.post('/smart/feedback/list', this.params).then(res => {
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						this.unInspectList = [...this.unInspectList, ...res.data.list]	
						if(this.unInspectList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMore = false
						}
					}
				})
			},
			getHandleList() {
				this.$http2.post('/smart/feedback/list', this.params1).then(res => {
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						this.handleList = [...this.handleList, ...res.data.list]	
						if(this.handleList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMore = false
						}
					}
				})
			},
			getCompleteList() {
				this.$http2.post('/smart/feedback/list', this.params2).then(res => {
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						this.completeList = [...this.completeList, ...res.data.list]	
						if(this.completeList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMore = false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg100 {
	padding-top: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}
</style>
